<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="/">
    <title> -</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <div class="row">
        <div class="col-sm-12">
           <div class="ibox">
            <div class="ibox-title">
                <h5>域名解析</h5>
            </div>
            <div class="ibox-content">
                <form class="form-horizontal m-t" id="commentForm">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">域名：</label>
                        <div class="col-sm-8">
                            <input id="domainName" name="domainName" minlength="2" type="text" class="form-control" value="${(sys.httpUrl)!}" required="" aria-required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">解析地址：</label>
                        <div class="col-sm-8">
                            <input id="sourceIp" style="width: 200px;display:inline-block" placeholder="来源地址" name="sourceIp" minlength="2" type="text" class="form-control" value="${(sys.httpUrl)!}" required="" aria-required="true">
                            -
                            <input id="targetIp" style="width: 200px;display:inline-block" placeholder="目标地址" name="targetIp" minlength="2" type="text" class="form-control" value="${(sys.httpUrl)!}" required="" aria-required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-3">
                            <button class="btn btn-primary" type="button" onclick="save()">保存</button>
                        </div>
                    </div>
                </form>
            </div>
           </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>域名解析列表</h5>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped" id="dns_list">
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
</body>
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script>
    $('#dns_list').bootstrapTable({
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        url: "/domainquery",
        sidePagination:'server',
        search: false,
        pagination: false,
        showRefresh: true,
        showToggle: true,
        showColumns: true,
        iconSize: 'outline',
        toolbar: '#toolbar',
        icons: {refresh: "glyphicon-repeat", toggle: "glyphicon-list-alt", columns: "glyphicon-list"},
        columns:[
            {
                title:'域名',
                field:'domainName',
                width:20,
                align:'center'
            },
            {
                title:'来源IP',
                field:'sourceIp',
                width:30,
                align:'center'
            },
            {
                title:'解析IP',
                field:'targetIp',
                width:30,
                align:'center'
            },
            {
                title:'操作',
                field:'operator',
                width:70,
                align:'center',
                formatter:function(value,row,index){
                    var html="";
                    html+="<button class=\"btn btn-danger \" onclick=\"oper_delete('"+row.id+"')\" type=\"button\"><span class=\"bold\">删除</span></button>";
                   return html;
                }
            }
        ],
        responseHandler:function(res){
            //在ajax获取到数据，渲染表格之前，修改数据源
            return{                            //return bootstrap-table能处理的数据格式
                "total":res.data.length,
                "rows":res.data
            }
        }
    });
    function save() {
        var domainName=$("#domainName").val();
        var sourceIp=$("#sourceIp").val();
        var targetIp=$("#targetIp").val();
        $.ajax({
            type:"post",
            url: "/domain/save",
            data:{
                domainName:domainName,
                sourceIp:sourceIp,
                targetIp:targetIp
            },
            success: function(data){
                if(data.code=="0000"){
                    $("#dns_list").bootstrapTable('refresh');
                    layer.alert('保存成功');
                }else{
                    layer.alert('保存失败');
                }
            }
        });
    }

    function oper_delete(id) {
        $.ajax({
            type:"post",
            url: "/domain/delete/"+id,
            data:{
            },
            success: function(data){
                if(data.code=="0000"){
                    $("#dns_list").bootstrapTable('refresh');
                    layer.alert('删除成功');
                }else{
                    layer.alert('删除失败');
                }
            }
        });
    }

</script>
</html>
